﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3实现网页电子时钟-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
 * {
	margin:0;
	padding:0;
}
ul,li {
	list-style:none;
}
body {
	background:radial-gradient(#eeefef,#d6d7d9);
	padding:50px;
}
.box {
	width:540px;
	height:200px;
	margin:50px auto;
}
.box ul li {
	width:150px;
	height:160px;
	border:1px solid #9fa2ad;
	display:inline-block;
	margin-right:10px;
	text-align:center;
	border-radius:5px;
	box-shadow:inset 0 -2px 0 #f1f1f1,0 1px 0 #f1f1f1,0 2px 0 #9fa2ad,0 3px 0 #f1f1f1,0 4px 0 #9fa2ad;
	background:-webkit-linear-gradient(top,rgba(248,248,248,.3) 20%,rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%,rgba(248,248,248,.2) 90%);
	position:relative;
}
.box li span:first-child {
	font-size:120px;
	color:#52555a;
	display:block;
	height:130px;
	line-height:150px;
}
.box li:before,.box li:after {
	display:block;
	content:"";
	position:absolute;
	width:150px;
}
.box li:before {
	top:50%;
	height:1px;
	box-shadow:0 1px 0 #868995,0 2px 1px #fff;
}
.box li:after {
	bottom:-65px;
	height:60px;
	border-radius:0 0 5px 5px;
	background:-webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)));
	background:-webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
	background:linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
	z-index:1;
}
</style>
</head>
<body>
<div id="snowzone">
</div>
<div class="box">
    <ul>
        <li><span id="hour"></span><span>时</span></li>
        <li><span id="minute"></span><span>分</span></li>
        <li><span id="second"></span><span>秒</span></li>
    </ul>
</div>

<script>
 var hour = document.getElementById('hour');
 var minute = document.getElementById('minute');
 var second = document.getElementById('second');

 function showTime() {
     var oDate = new Date();
     var iHours = oDate.getHours();
     var iMinute = oDate.getMinutes();
     var iSecond = oDate.getSeconds();
     hour.innerHTML = AddZero(iHours);
     minute.innerHTML = AddZero(iMinute);
     second.innerHTML = AddZero(iSecond);
 }
 showTime();
 setInterval(showTime, 1000);

 function AddZero(n) {
     if (n < 10) {
         return '0' + n;
     }
     return '' + n;
 }
</script>

</body>
</html>
